<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
    <style>
        .base1{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .base2{
            font-size: 20px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>

<!--

  如何实现css样式动态操作
  1. style
       v-bind:style = "{样式名:样式值}"
       v-bind:style = "属性"
  2. class
      {base1:true,base2:true}  true 生效  false 无效


-->

<div id="app">
    <div :style="{backgroundColor:color,fontSize:size+'px'}">
        <p>Style样式的动态操作</p>
    </div>
    <div>
        <button @click="editColor">color</button>
        <button @click="editSize">fontSize</button>
    </div>
    <hr>
    <div :style="styleObj">
        <p>Style样式的动态操作</p>
    </div>
    <div>
        <button @click="editObjColor">color</button>
        <button @click="editObjSize(30)">fontSize</button>
    </div>

    <hr>

    <div :class="{base1:isActiveBase1,base2:isActiveBase2}">
        <p>class样式的动态操作</p>
    </div>
    <div>
        <button @click="editDivWidth">width</button>
        <button @click="editDivFont">fontSize</button>
    </div>

    <hr>
    <div :class="cssObj">
        <p>class样式的动态操作</p>
    </div>

    <hr>
    <div :class="[base1,base2]">
        <p>class样式的动态操作</p>
    </div>

    <hr>
    <div :class="cssArray">
        <p>class样式的动态操作</p>
    </div>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            color: 'green',
            size: 50,
            styleObj: {
                backgroundColor: 'red',
                fontSize: '50px'
            },
            isActiveBase1:true,
            isActiveBase2:true,
            cssObj:{
                base1:true,
                base2:true
            },
            base1:'base1',
            base2:'base2',
            cssArray:[
                'base1','base2'
            ]
        },
        methods: {
            editColor() {
                this.color = '#ff6700'
            },
            editSize() {
                this.size++
            },
            editObjColor() {
                this.styleObj.backgroundColor = '#ff6700'
            },
            editObjSize(size) {
                this.styleObj.fontSize = size + 'px'
            },
            editDivWidth(){
                this.isActiveBase1 = !this.isActiveBase1
            },
            editDivFont(){
                this.isActiveBase2 = !this.isActiveBase2
            }
        }
    })
</script>

</body>
</html>
